<link rel="stylesheet" href="<?php echo cssPath ?>formulario.css" type="text/css" media="screen"/>
<script type="text/javascript" src="<?php echo jsPath ?>jquery.min.js"></script>
<script type="text/javascript" src="<?php echo jsPath ?>sliding.form.js"></script>

<?php
    if (isset($_GET['id'])) {
        $id = trim($_GET['id']);
    }
    
    $db = new database();

$seleciona = $db->select('u.firstname, c.idcliente')
        ->from('user as u, cliente as c')
        ->where('u.iduser', $id)
        ->execute();

$linhas = mysql_fetch_assoc($seleciona);

?>

<h1>Criar Histórico de <?php echo $linhas['firstname']; ?></h1>

<?php
    
    if (isset($_GET['mensagem'])) {
        $mensagem = $_GET['mensagem'];

        if ($mensagem == 'nome') {
            echo '<p class="msnError">Você não digitou seu Nome.</p>';
        } elseif ($mensagem == 'sobrenome') {
            echo '<p class="msnError">Você não digitou seu Sobrenome.</p>';
        } elseif ($mensagem == 'email') {
            echo '<p class="msnError">Você não digitou seu E-mail.</p>';
        } elseif ($mensagem == 'senha') {
            echo '<p class="msnError">Você não digitou sua Senha.</p>';
        } elseif ($mensagem == 'sexo') {
            echo '<p class="msnError">Você não marcou seu Sexo.</p>';
        } elseif ($mensagem == 'datanasc') {
            echo '<p class="msnError">Você não digitou sua Data de Nascimento.</p>';
        } elseif ($mensagem == 'error') {
            echo '<p class="msnError">Erro ao inserir usuário, tente novamente!</p>';
        } elseif ($mensagem == 'sucesso') {
            echo '<p class="msnSucesso">Usuário inserido com sucesso!</p>';
        }
    }
    
    
    
    ?>
<div id="wrapper">
    <div id="steps">
        <form id="formElem" name="formElem" action="/historico/novo" method="post" enctype="multipart/form-data">
            <fieldset class="step">
                <legend>Salão</legend>
                    <input id="cliente" name="cliente" type="text" value="<?php echo $linhas['idcliente']; ?>" />
                <p>
                    <label for="nomesalao">Nome</label>
                    <input id="nomesalao" name="nomesalao" type="text" />
                </p>
                <p>
                    <label for="local">Localização</label>
                    <input id="local" name="local" type="text" placeholder="Rua e n° ou Bairro" />
                </p>
                <p>
                    <label for="telsalao">Tel.</label>
                    <input id="telsalao" name="telsalao" type="text" placeholder="(xx)xxxx-xxxx" />
                </p>
            </fieldset>
            <fieldset class="step">
                <legend>Histórico</legend>
                <p>
                    <label for="datahist">Data do Histórico</label>
                    <input id="datahist" name="datanasc" type="date" maxlength="10" placeholder="xx/xx/xxxx" />
                </p>
                <p>
                    <label for="precohist">Preço Total</label>
                    <input id="precohist" name="precohist" type="text" placeholder="999,99" />
                </p>
                <p>
                    <label for="duracaohist">Duração do histórico</label>
                    <input id="duracaohist" name="duracaohist" type="text" placeholder="00h00min" />
                </p>
                    <input id="visualizacaohist" name="visualizacaohist" type="text" value="0" />
                <p>
                    <sub> Você gostou do que foi feito em seu cabelo?</sub>
                    <label for="sathist">Satisfação</label>
                    <select id="sathist" name="sathist" >
                        <option checked> </option>
                        <option value="5">Totalmente satisfeito</option>
                        <option value="4">Muito satisfeito</option>
                        <option value="3">Satisfeito</option>
                        <option value="2">Pouco satisfeito</option>
                        <option value="1">Insatisfeito</option>
                    </select>
                </p>
            </fieldset>
            <fieldset class="step">
                <legend>Foto Antes e depois</legend>
                <p>
                    <label for="fotoantes">Foto Antes</label>
                    <input id="fotoantes" name="fotoantes" type="file" />
                </p>
                <p>
                    <label for="fotodepois">Foto Antes</label>
                    <input id="fotodepois" name="fotodepois" type="file" />
                </p>
            </fieldset>
            <fieldset class="step">
                <legend>Personalizar</legend>
                  <p>Cores</p>
                  <div class="cores">  
                    <div class="cor1">Padrão</div>
                    <div class="cor2">Rosa</div>
                    <div class="cor3">Amarelo</div>
                    <div class="cor4">Verde</div>
                    <div class="cor5">Salmão</div>
                    <div class="cor6">Rosa Escuro</div>
                    <div class="cor7">Azul</div>
                    <div class="cor8">Lilas</div>
                 
                </div>
                <p>
                    <label for="perhist">Escolha uma Cor</label>
                    <select id="perhist" name="perhist" >
                        <option checked> </option>
                        <option value="1">Padrão</option>
                        <option value="2">Rosa</option>
                        <option value="3">Amarelo</option>
                        <option value="4">Verde</option>
                        <option value="5">Salmão</option>
                        <option value="6">Rosa Escuro</option>
                        <option value="7">Azul</option>
                        <option value="8">Lilas</option>
                    </select>
                </p>
            </fieldset>
            <fieldset class="step">
                <legend>Meu cabelo ficou!</legend>
                <p>
                    <label for="tipocabelo">Tipo do Cabelo</label>
                    <select id="tipocabelo" name="tipocabelo">
                        <option checked> </option>
                        <option>Afro</option>
                        <option>Cacheado</option>
                        <option>Crespo</option>
                        <option>Liso</option>
                        <option>Ondulado</option>
                    </select>
                </p>
                <p>
                    <label for="tamcabelo">Tamanho do Cabelo</label>
                    <select id="tamcabelo" name="tamcabelo">
                        <option checked> </option>
                        <option>Curto</option>
                        <option>Médio</option>
                        <option>Longo</option>
                    </select>
                </p>
                <p>
                    <label for="corcabelo">Cor do Cabelo</label>
                    <select id="corcabelo" name="corcabelo">
                        <option checked> </option>
                        <option>Castanho</option>
                        <option>Loiro</option>
                        <option>Preto</option>
                        <option>Ruivo</option>
                    </select>
                </p>
            </fieldset>
            <fieldset class="step">
                <legend>Confirmação</legend>
                <p>
                    Se os dados estiverem corretos aparecerá
                    um marcador verde, se não aparecerá um vermelho.
                    Confira sempre seus dados antes de enviar!
                    Obrigado(a)!
                </p>
                <p class="submit">
                    <button id="registerButton" type="submit">Criar</button>
                </p>
            </fieldset>
        </form>
    </div>
    <div id="navigation" style="display:none;">
        <ul>
            <li class="selected">
                <a href="#">Salão</a>
            </li>
            <li>
                <a href="#">Histórico</a>
            </li>
            <li>
                <a href="#">Fotos</a>
            </li>
            <li>
                <a href="#">Personalizar</a>
            </li>
            <li>
                <a href="#">Meu cabelo</a>
            </li>
            <li>
                <a href="#">Confirmação</a>
            </li>
        </ul>
    </div>
</div>
